---
title: Eksempler
description: Før- og etter-eksempler på Ultracite i bruk.
---

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

## Automatisk kodeformatering

### Før (rotete formatering)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

I denne koden er mellomrom og sammenføyningsstil feil. Den bruker også strengsammenkobling i stedet for template literals, og har doble anførselstegn blandet med enkle.

### Etter (formatert)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Ultracites formatter har:

- Formatert funksjonen med riktige linjeskift for bedre lesbarhet.
- Konvertert strengsammenkoblingen til en template literal (dette kan være en automatisk fiksering fra en lint-regel som foreslår template-strenger for økt lesbarhet).
- Standardisert anførselstegn til backticks for templaten (og vil bruke doble anførselstegn konsekvent andre steder hvis det ikke er en template).
- Lagt til et semikolon på slutten av `return`-setningen.
- Sikret korrekt mellomrom rundt krøllparenteser og parenteser.

Utvikleren reformaterte ikke koden manuelt – de lagret bare filen, og Ultracite ordnet resten. Resultatet er renere og mer konsistent kode.

Ultracite vil også advare om at `name` er uten type og vil foreslå å legge til en type.

## Håndheving av streng likhet

### Før (potensiell feil med løs likhet)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Her bruker koden løs likhet (`==`) for å sammenligne `response.status` med `200`. Å bruke løs likhet kan være feilutsatt på grunn av typkonvertering (f.eks. kan `response.status` være en streng `"200"` og likevel passere). Ultracites strenge regler håndhever trolig bruk av `===` for sammenligninger.

### Etter (Ultracite automatisk fikset)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite erstattet automatisk `== 200` med `=== 200`. Denne lille endringen forhindrer subtile feil. Fiksen ble anvendt ved lagring som en del av `source.fixAll.biome`-handlingene. En slik regel (lik ESLint’s `eqeqeq`) sikrer at utviklere bruker streng likhetssjekk.

I tillegg vil Ultracite også advare om at `isValid` aldri blir brukt, og vil foreslå å fjerne den.

## Organisering og opprydding av importer

### Før (uorganiserte importer)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Importene her er ikke i alfabetisk rekkefølge, og `helper`-importen brukes aldri i filen.

### Etter (etter lagring med Ultracite)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (via Biome’s organize imports feature) sorterte importene alfabetisk etter modulnavn. Den fjernet også automatisk den ubrukte `helper`-importen. Forskjellen mellom før og etter skjer umiddelbart ved lagring, slik at importseksjonen alltid er ryddig:

- Ingen ubrukte importer som roter til toppen av filen.
- Deterministisk rekkefølge på importer (slik at merges og diff'er ikke blir forvirret av forskjellige importrekkefølger lagt til av ulike utviklere).

Dette fører til mer vedlikeholdbar kode, spesielt i filer med mange importer.

## Tilgjengelighetsfiks

### Før

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

Standardtypen for en knapp er `submit`, noe som gjør at et skjema blir sendt når knappen plasseres inne i et form-element. Dette er sannsynligvis ikke ønsket oppførsel i en React-applikasjon. Ultracite vil advare om dette og tilby en hurtigfiks for å endre typen til `button`.

### Etter (manuell eller hurtigfiks)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

Typen er nå `button`, noe som forhindrer at et overordnet skjema potensielt blir sendt når knappen klikkes.

---

Disse eksemplene viser hvordan Ultracite forbedrer kodekvalitet:

- Formatering og stilkonsistens uten innsats.
- Automatiske fikser for mange vanlige problemer (slik at du sjelden må fikse trivielle ting manuelt).
- Identifikasjon av reelle problemer (slik at du kan rette dem tidlig i utviklingen).

Ved å bruke Ultracite holder koden din seg ikke bare ren, men også mindre feilutsatt og mer tilgjengelig, takket være den samlede kunnskapen kodet inn i reglene.